import { Component, OnInit } from '@angular/core'
import { SelectionModel } from '@angular/cdk/collections'
import { autorun, observable, trace } from 'mobx'
import { AppUiState } from '../stores/app-ui-state'

const ITEMS = [
  { id: 1, name: 1 },
  { id: 2, name: 2 },
  { id: 3, name: 3 },
  { id: 4, name: 4 },
  { id: 5, name: 5 },
]

@Component({
  selector: 'app-selection-sample',
  templateUrl: './selection-sample.component.html',
  styleUrls: [ './selection-sample.component.css' ]
})
export class SelectionSampleComponent implements OnInit {
  @observable items = ITEMS

  @observable.struct selected = []

  selectionModel = new SelectionModel(true, this.selected)

  constructor(public uiState: AppUiState) {
    console.log(uiState)
    autorun(() => {
      trace()
      console.log(JSON.stringify(this.selected)/*, this.selectionModel.selected*/)
    }, { name: 'Auturun@A' })
  }

  ngOnInit() {
    this.selectionModel.onChange.subscribe(event => {
      this.selected = event.source.selected
    })
  }

  onChange(value, checked) {
    console.log(JSON.stringify(value), checked)
    this.selectionModel.toggle(value.id)
    // this.selected = [ value.id ]
  }

  onClick() {
    this.selected = [ 2, 3 ]
  }
}
